<!--
 * @Description: 不良信息组件
 * @Version: 1.0
 * @Date: 2024-03-14 19:13:21
 * @LastEditTime: 2024-03-15 16:11:59
-->
<template>
    <div class="bad_info_layout">
        <div class="hander">
            <span>不良信息卡片</span>
        </div>
        <div class="bad_info_body" >
            <div v-if="JSON.stringify(info) != '{}'">
                <span class="span_base_style">
                    卷号：{{ info.INNER_IN_MAT_NO }}
                </span>
                <span class="span_base_style">
                    生产用时：{{format(info.OUTPUT_SE) }}(min)
                </span><br>
                <span class="bad_info_text" v-if="info.SURF_DEFECT_MARK1 != undefined" v-on:click="infoShow(isShow)">
                {{info.SURF_DEFECT_MARK1 }}
                </span>
                <div v-else class="empty">
                    <span>暂无数据</span>
                </div>
            </div>
            <div class="empty" v-else>
                <span >暂无数据</span>
            </div>
        </div>
        <div v-show="isShow" class="details_info">
            <span>{{ info.SURF_DEFECT_MARK1 }}</span>
        </div>
    </div>
</template>
<script setup lang='ts'>

import { onBeforeMount, onMounted, ref, watch } from 'vue';
const props = defineProps<{
    coilId: {
        type: string,
        default: '',
    },
    mesInfo: {
        type: Array<any>,
        default: [],
    }
}>()
const info = ref<any>({})
const isShow = ref(false)
const infoShow = async (type: any) => {
    isShow.value = !type
}
watch(
    () => [props.coilId, props.mesInfo],
    (newVal, oldVal) => {

        const obj = Object.fromEntries(props.mesInfo.map(item => [item.INNER_IN_MAT_NO, item]));
        if (obj[props.coilId] != undefined) {
            info.value = obj[props.coilId]
        }
    }
);
const format = (data:any)=>{
    return Math.round(data/60);
}
</script>
<style scoped>
.bad_info_layout {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(6, 63, 147, 0.8) 50%, transparent 100%);
    border: 2px solid #06279d80;
    border-radius: 20px;
    /* border-radius:50%; */
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(6, 39, 157, 1), rgba(0, 0, 0, 0.05)) 1 100%;
    border-image-slice: 1;

}

.hander {
    text-align: center;
}

.hander span {
    background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2vh;
    font-weight: bolder;

}

.bad_info_body {
    color: #FFF;
}

.bad_info_text {
    /* overflow: scroll; */
    font-size: 1.3vh;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.empty {
    text-align: center;
    color: #FFF;
    margin:  1vh 0;
}


.span_base_style {
    font-weight: 900;
    margin-right: 0.5vw;
    font-size: 0.7vw;
    /* overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; */
    /* -webkit-box-orient: vertical; */
}

.details_info {
    color: #FFF;
    position: absolute;
    margin-top: -17vh;
    margin-left: -20vw;
    width: 20vw;
    /* height: 20vh; */
    background: #064093;
    border: 2px solid #06279d80;
    border-radius: 10px 10px 10px 10px;
    padding: 5px;
}

/* 
.details_info:before {
    content: " ";
    position: absolute;
    border: 10px solid transparent;
    border-top-color: #064093;
    border-right-color: #064093;
    right: 100%;
    top: 95%;
    transform: skewY(-50deg);
} */
</style>